NW6 | Fathi_Kahin | HTML-CSS | Multipage-clone | Week 4 #178
Conversation
✅ Deploy Preview for cyf-module-html-css ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
eliza-an
left a comment
eliza-an
left a comment
There was a problem hiding this comment.
Well done on the use of animations and making the image look similar. Your use of variables in css to save the colors is very impressive and I am very happy to see so much progress!
Unfortunately, you are missing a very big part of the assignment here. You design had to be responsive. This means that when I look at it on a mobile device, it will still look like the template. Try to fix this using media queries as this is what happens when I view the page in responsive mode :
To check if your page is responsive, inspect the page and click this button
I have added a few resources already, but here is the media queries again: https://www.w3schools.com/css/css_rwd_mediaqueries.asp
| <header> | ||
| <section class="top-navigation"> | ||
| <section class="input"> | ||
| <input |
There was a problem hiding this comment.
Notice how there is a little emoji in the search bar on the demo. You dont have one here!
| <span></span> | ||
| <span></span> | ||
| </div> | ||
| <ul class="list tabs"> |
There was a problem hiding this comment.
Notice how your font is different from the one provided! Here is an image of the font instructions! They can be found in the main repo! The font has to be changed for the whole page!
Here is an image of the font instructions!
| @@ -1,3 +1,771 @@ | |||
| /* Add your CSS here */ | |||
There was a problem hiding this comment.
Notice how one of the main requirements is that you have "a mobile first responsive design".
This means that your page must look like the template on a phone as well. This is what yours looks like :
and this is the template :
Do you see how there are quite a few differences? Try to fix this when you get the chance ! You can do this using media queries. Here is a link : https://www.w3schools.com/cssref/css3_pr_mediaquery.php
| </svg> | ||
| <span>2035</span> | ||
| </div> | ||
| <h1 class="heading">PRICKLES & CO</h1> |
There was a problem hiding this comment.
Your text is not centered here! How can you fix this?
| </div> | ||
| <h1 class="heading">PRICKLES & CO</h1> | ||
| <p class="hero-card-p">BRING NATURE INDOORS</p> | ||
| <button class="hero-btn">Shop Now</button> |
There was a problem hiding this comment.
When i hover over the shop now button on the template, this is what i see
But on yours we have this:
How can you fix this?
Here is a usefuol link : https://www.w3schools.com/cssref/sel_hover.php
| </section> | ||
| <section class="columns"> | ||
| <section class="about-us" id="about"> | ||
| <div class="about-us-card"> |
There was a problem hiding this comment.
The template has three sections here with two images and you only have one!. Also the font and the sizing is different here! Try to pay attention to the details here :)
| Prickles & Co. can make your home more lush and vibrant. | ||
| </p> | ||
| </div> | ||
| <div class="/about-us-img-1"></div> |
There was a problem hiding this comment.
Try to use sematic html. It's important to use tags for images because they have at attributes, so if anyone is blind, the computer knows to read it out to them. A div does not provide the same use or tell the user much
| <div class="buy-online-img"></div> | ||
| <div class="buy-online-card"> | ||
| <p class="buy-online-p">BUY ONLINE NOW & GET 10% OFF !</p> | ||
| <button class="hero-btn buy-online-btn">Shop Now</button> |
There was a problem hiding this comment.
when i put my mouse over the button on the template, The button changes color but yours doesnt. Use the resources above to help you
| </section> | ||
| <section class="contact-us" id="contact"> | ||
| <form class="contact-form"> | ||
| <h2 class="about-us-heading">FOR SPECIAL REQUESTS & ORDERS</h2> |
There was a problem hiding this comment.
Here is what your box looks like:
and here is theirs,
Notice how the size and fonts are very different. Also your words dont have a * next to them!
| >First Name | ||
| <input type="text" name="first-name" id="f-name" /> | ||
| </label> | ||
| <label for="last-name" |
Learners, PR Template
Self checklist
Changelist
Briefly explain your PR.
Questions
Ask any questions you have for your reviewer.